import {
  addCategories,
  deleteCategories,
  getCategories,
  updateCategories,
  uploadCategories
} from '@/api/written/categories';
import CommonTable from '@/components/Table';
import React, { useRef, useState } from 'react';
import SearchBar from './Search';
import { Tag } from 'antd';
import { CategoriesItem } from '@/api/written/categories';
import { ColumnType } from 'antd/es/table';
import AddForm from './AddForm';
import EditForm from './EditForm';

const defaultColumn: ColumnType<CategoriesItem>[] = [
  {
    title: '分类名称',
    key: 'categoryName',
    dataIndex: 'categoryName',
    render: (text) => <Tag>{text}</Tag>
  }
];

export default function TagsManagement() {
  const [tagsData, setTagsData] = useState<CategoriesItem[]>([]);
  const [recorde, setRecord] = useState<CategoriesItem>();
  const formRef = useRef();
  const handleChange = (data: CategoriesItem[]) => setTagsData(data);
  const handleRecordChange = (data: CategoriesItem, form: any) => {
    setRecord(data);
    formRef.current = form;
  };
  return (
    <>
      <CommonTable
        title="分类"
        deleteApi={deleteCategories}
        getDataApi={getCategories}
        updateDataApi={updateCategories}
        uploadApi={uploadCategories}
        addDataApi={addCategories}
        columns={defaultColumn}
        onChange={handleChange}
        onRecordChange={handleRecordChange}
        AddForm={<AddForm data={tagsData} />}
        EditForm={<EditForm data={recorde} form={formRef.current} />}
        SerchBar={<SearchBar />}
      />
    </>
  );
}
